<template>
  <el-collapse
    v-if="useCollapse"
    v-model="activeName"
    accordion
    :class="[prefixClass, `${prefixClass}-collapse`, $classShadow, $classBgColor, $classPandding]"
    :style="{ borderRadius: `${radius}px` }"
    v-bind="$attrs"
    v-on="$attrs"
  >
    <el-collapse-item name="1">
      <template #header>
        <slot name="header">{{ title }}</slot>
      </template>
      <slot></slot>
    </el-collapse-item>
  </el-collapse>
  <div
    v-else
    :class="[prefixClass, $classShadow, $classBgColor, $classPandding]"
    :style="{ borderRadius: `${radius}px` }"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps({
  useCollapse: {
    type: Boolean,
    default: false,
  },
  // 圆角大小
  radius: {
    type: Number,
    default: 6,
  },
  // 是否显示hover状态下投影
  showShadow: {
    type: Boolean,
    default: true,
  },
  // 是否展示背景色
  showBgColor: {
    type: Boolean,
    default: false,
  },
  // 是否使用默认padding
  usePadding: {
    type: Boolean,
    default: true,
  },
  // 折叠面板标题
  title: {
    type: String,
    default: '',
  },
})

const prefixClass = 'fi-panel'
const activeName = ref('1')
// const $prefixClass = computed(
//   () =>
//     `${prefixClass}${props.showShadow ? prefixClass + '--shadow' : ''} ${
//       props.showBgColor ? prefixClass + '--bg-color' : ''
//     } ${props.usePadding ? prefixClass + '--padding' : ''}`
// )

const $classShadow = computed(() => `${props.showShadow ? prefixClass + '--shadow' : ''}`)
const $classBgColor = computed(() => `${props.showBgColor ? prefixClass + '--bg-color' : ''}`)
const $classPandding = computed(() => `${props.usePadding ? prefixClass + '--padding' : ''}`)
</script>

<style lang="less" scoped>
@prefix-cls: ~'fi-panel';

.@{prefix-cls} {
  width: 100%;
  background: #fff;
  &-collapse {
    border: 0px;
    ::v-deep(.el-collapse-item__header) {
      border-bottom: 0px;
    }
    ::v-deep(.el-collapse-item__wrap) {
      border-bottom: 0px;
    }
  }
  &--shadow {
    &:hover {
      box-shadow: 1px 4px 12px 0px rgba(0, 0, 0, 0.16);
      opacity: 0.8;
    }
  }
  &--bg-color {
    background: linear-gradient(180deg, var(--el-color-primary-light-9) 0%, rgba(255, 251, 251, 0) 100%);
  }
  &--padding {
    padding: 20px;
  }
}
</style>
